import React, { useState } from 'react';
import { Link } from 'react-router-dom';

import 资讯动态图标1 from '../../assets/footerimg/资讯动态1.png';
import 资讯动态图标2 from '../../assets/footerimg/资讯动态2.png';
import 发现图标1 from '../../assets/footerimg/发现.png';
import 发现图标2 from '../../assets/footerimg/发现 (1).png';
import 运动图标1 from '../../assets/footerimg/运动.png';
import 运动图标2 from '../../assets/footerimg/运动 (1).png';
// import 消息图标1 from '../../assets/footerimg/消息.png';
// import 消息图标2 from '../../assets/footerimg/消息 (1).png';
import 我的图标1 from '../../assets/footerimg/我的.png';
import 我的图标2 from '../../assets/footerimg/我的 (1).png';

const navList = [
  {
    name: '资讯动态',
    icon: [资讯动态图标1, 资讯动态图标2],
    path: '/',
    flag:false
  },
  {
    name: '发现',
    icon: [发现图标1, 发现图标2],
    path: '/discover',
    flag:false
  },
  {
    name: '运动',
    icon: [运动图标1, 运动图标2],
    path: '/movement',
    flag:false
  },
  {
    name: '我的',
    icon: [我的图标1, 我的图标2],
    path: '/my',
    flag:false
  },
];

function Footer() {
  const [activeIndex, setActiveIndex] = useState(-1);
  const handleClick = (index) => {
    setActiveIndex(index);
  };


  return (
    <div
      className="footer"
      style={{ backgroundColor: '#f2f2f2', position: 'fixed', bottom: '0px', width: '100%',zIndex:'999' }}
    >
      <nav>
        <ul
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            listStyle: 'none',
          }}
        >
          {navList.map((item, index) => (
            <li key={index} style={{ flexBasis: 'calc(20% - 20px)' }}>
              <Link
                to={item.path}
                style={{ textDecoration: 'none', color: 'black' }}
                onClick={() => handleClick(index)}
              >
                <img
                  style={{ width: '30px', height: '30px' }}
                  src={index === activeIndex ? item.icon[1] : item.icon[0]}
                  alt=""
                />
                {index === activeIndex}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
}

export default Footer;
